<template>
  <!-- 背景 -->
  <view class="bg">
    <!-- 底层背景颜色 -->
    <view class="bg-color" />
    <!-- 轮播图 -->
    <swiper
      class="card-swiper"
      :class="dotStyle ? 'square-dot' : 'round-dot'"
      :indicator-dots="true"
      :circular="true"
      :autoplay="true"
      interval="5000"
      duration="500"
      @change="cardSwiper"
      indicator-color="#8799a3"
      indicator-active-color="#0081ff"
    >
      <swiper-item
        v-for="(item, index) in swiperList"
        :key="index"
        :class="cardCur == index ? 'cur' : ''"
      >
        <view class="swiper-item">
          <image
            :src="item.url"
            mode="aspectFill"
            v-if="item.type == 'image'"
          ></image>
          <video
            :src="item.url"
            autoplay
            loop
            muted
            :show-play-btn="false"
            :controls="false"
            objectFit="cover"
            v-if="item.type == 'video'"
          ></video>
        </view>
      </swiper-item>
    </swiper>
    <!-- 搜索框 -->
    <view class="search-bar">
      <uni-search-bar
        class="uni-mt-10"
        radius="20"
        bgColor="#fff"
        placeholder="自动显示隐藏"
        clearButton="auto"
        cancelButton="none"
        @confirm="search"
      >
        <!-- 自定义搜索icon -->
        <template v-slot:searchIcon>
          <img class="search-icon" src="/static/img/search.png" />
        </template>
      </uni-search-bar>
    </view>
    <!-- 发布失物招领与寻物启事 -->
    <view>
      <view class="post-info">
        <text class="title">发布</text>
        <view class="post-btn-area">
          <!-- 按钮区 -->
          <navigator url="/pages/postFound/postFound">
            <button class="post-info-btn" type="default">
              <img class="post-info-icon" src="/static/img/fly.png" />
              失物招领
            </button>
          </navigator>
          <navigator url="/pages/postLost/postLost">
            <button class="post-info-btn" type="default">
              <img class="post-info-icon" src="/static/img/search.png" />
              寻物启事
            </button>
          </navigator>
        </view>
      </view>
      <!-- 提示文本 -->
      <text class="tips">tips：点击图标即可进入隐秘角落，进行...</text>
    </view>
    <!-- 公告通知 -->
    <view class="notice-board">
      <view>
        <img class="post-info-icon" src="/static/img/notice.png" />
        <text class="title">最新公告</text>
      </view>
      <uni-card is-full spacing="0">
        <uni-notice-bar
          background-color="#fff"
          color="#000"
          text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
          show-get-more
          @getmore="getMore"
        />
        <uni-notice-bar
          background-color="#fff"
          color="#000"
          text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
          show-get-more
          @getmore="getMore"
        />
        <uni-notice-bar
          background-color="#fff"
          color="#000"
          text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
          show-get-more
          @getmore="getMore"
        />
      </uni-card>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cardCur: 0,
      swiperList: [
        {
          id: 0,
          type: "image",
          url: "https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg",
        },
        {
          id: 1,
          type: "image",
          url: "https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg",
        },
        {
          id: 2,
          type: "image",
          url: "https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg",
        },
        {
          id: 3,
          type: "image",
          url: "https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg",
        },
        {
          id: 4,
          type: "image",
          url: "https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg",
        },
        {
          id: 5,
          type: "image",
          url: "https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg",
        },
        {
          id: 6,
          type: "image",
          url: "https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg",
        },
      ],
      dotStyle: false,
      towerStart: 0,
      direction: "",
    };
  },
  onLoad() {
    this.TowerSwiper("swiperList");
    // 初始化towerSwiper 传已有的数组名即可
  },
  methods: {
    DotStyle(e) {
      this.dotStyle = e.detail.value;
    },
    // cardSwiper
    cardSwiper(e) {
      this.cardCur = e.detail.current;
    },
    // towerSwiper
    // 初始化towerSwiper
    TowerSwiper(name) {
      let list = this[name];
      for (let i = 0; i < list.length; i++) {
        list[i].zIndex =
          parseInt(list.length / 2) +
          1 -
          Math.abs(i - parseInt(list.length / 2));
        list[i].mLeft = i - parseInt(list.length / 2);
      }
      this.swiperList = list;
    },

    // towerSwiper触摸开始
    TowerStart(e) {
      this.towerStart = e.touches[0].pageX;
    },

    // towerSwiper计算方向
    TowerMove(e) {
      this.direction =
        e.touches[0].pageX - this.towerStart > 0 ? "right" : "left";
    },

    // towerSwiper计算滚动
    TowerEnd(e) {
      let direction = this.direction;
      let list = this.swiperList;
      if (direction == "right") {
        let mLeft = list[0].mLeft;
        let zIndex = list[0].zIndex;
        for (let i = 1; i < this.swiperList.length; i++) {
          this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft;
          this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex;
        }
        this.swiperList[list.length - 1].mLeft = mLeft;
        this.swiperList[list.length - 1].zIndex = zIndex;
      } else {
        let mLeft = list[list.length - 1].mLeft;
        let zIndex = list[list.length - 1].zIndex;
        for (let i = this.swiperList.length - 1; i > 0; i--) {
          this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft;
          this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex;
        }
        this.swiperList[0].mLeft = mLeft;
        this.swiperList[0].zIndex = zIndex;
      }
      this.direction = "";
      this.swiperList = this.swiperList;
    },
  },
};
</script>

<style lang="scss">
.bg-color {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f7f7f7;
  z-index: -1;
}
.bg {
  width: 100%;
  height: 400rpx;
  border-radius: 0 0 140rpx 140rpx;
  background-color: #ffcf3f;
  .card-swiper {
    border-radius: 20rpx;
    box-shadow: 16rpx 16rpx 10rpx #bf9b2f;
    margin: 0 80rpx;
    overflow: hidden;
  }
  .search-bar {
    margin: 40rpx 60rpx;
    .search-icon {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .title {
    font-size: 30rpx;
    font-weight: bold;
  }
  .post-info {
    margin: 20rpx;
    > .title {
      margin-left: 100rpx;
    }
    .post-btn-area {
      display: flex;
      justify-content: space-evenly;
	  padding-top: 20rpx;
      .post-info-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 40rpx 0;
        width: 250rpx;
        height: 250rpx;
        .post-info-icon {
          width: 100rpx;
          height: 100rpx;
        }
      }
    }
  }
  .tips {
    margin-left: 100rpx;
    color: #b9b9b9;
    font-size: 24rpx;
  }
  .notice-board {
    padding: 30rpx 80rpx;
    > view {
      display: flex;
      align-items: center;
      margin: 20rpx;
      .post-info-icon {
        width: 100rpx;
        height: 100rpx;
      }
    }
  }
}
</style>
